<template>
  <div>
    <el-container>
      <el-header class="titlestyle"> 学籍管理系统 </el-header>
      <el-container>
        <el-aside width="200px">
          <!-- 菜单点击事件 -->
          <el-menu @select="menuClick">
            <el-submenu index="1">
              <template slot="title"
                ><i class="el-icon-ice-cream-round">登记功能</i></template
              >
              <el-menu-item index="/register">注册登记</el-menu-item>
              <el-menu-item index="/grade">成绩登记</el-menu-item>
              <el-menu-item index="/status">学籍登记</el-menu-item>
            </el-submenu>

            <el-submenu index="2">
              <template slot="title"
                ><i class="el-icon-lollipop">统计功能</i></template
              >
              <el-menu-item index="/statistics">资料统计</el-menu-item>
              <el-menu-item index="/population">人数统计</el-menu-item>
              <el-menu-item index="/personal">个人情况查询</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>

        <!-- <el-main>
          <el-table :data="tableData" :header-cell-style="tableHeaderColor">
            <el-table-column prop="sno" label="学号"></el-table-column>
            <el-table-column prop="sname" label="姓名"></el-table-column>
            <el-table-column prop="ssex" label="性别"></el-table-column>
            <el-table-column prop="sage" label="年龄"></el-table-column>
            <el-table-column prop="ses" label="学制"></el-table-column>
            <el-table-column prop="slocation" label="地区"></el-table-column>
            <el-table-column prop="spo" label="政治面貌"></el-table-column>
            <el-table-column prop="snation" label="民族"></el-table-column>
            <el-table-column prop="srp" label="奖惩记录"></el-table-column>
            <el-table-column prop="sstm" label="休复转退标记"></el-table-column>
            <el-table-column prop="smajor" label="所在专业"></el-table-column>
            <el-table-column prop="syear" label="年级"> </el-table-column>
          </el-table>
          
        </el-main> -->
        <router-view />
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  methods: {
    menuClick(index) {
      this.$router.push(index);
    },
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      return 'background-color:lightblue;color:#fff;font-wight:500;font-size:20px;text-align:center'
    }
  },
  data() {
    const item = {

    };
    return {
      tableData: Array(1).fill(item)
    }
  }
};
</script>

<style scoped>
.el-header {
  background-color: rgb(78, 70, 70);
  color: #333;
  line-height: 60px;
  font-size: 40px;
}

.el-table-column {
  margin: auto;
  width: 100px;
}

.titlestyle {
  text-align: center;
  margin-top: 0;
  color: rgb(51, 216, 216);
  letter-spacing: 0;
  text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777,
    0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333,
    0px 8px 7px #001135;
}

.el-aside {
  color: #333;
}
</style>